import React, { Component } from 'react'
import store from '../store'
import { add, minus, asyncMinus, asyncSetName } from '../store/actionCreator'

export default class Brother1 extends Component {

  state = {
    name: ''
  }

  addClick = () => {
    // 触发加操作的action
    // action是一个对象，必须要有一个属性是type,参数就是payload === 载荷 
    // 同步action
    // store.dispatch({type: 'ADD', payload: 3})
    // 把action抽取出去了，这样操作类型名就不高度耦合
    store.dispatch(add(3))

    // 异步action不能直接改state的值，必须先调用同步action，同步action去修改state的值
  }

  minusClick = () => {
    // store.dispatch({type: 'MINUS', payload: 2})
    // store.dispatch(minus(2))
    store.dispatch(asyncMinus(2))
  }

  sure = () => {
    store.dispatch(asyncSetName(this.state.name))
  }

  render() {
    return (
      <div>
        Brother1
        <br/>
        <br/>
        <br/>
        <button onClick={this.addClick}>+</button>&nbsp;&nbsp;&nbsp;
        <button onClick={this.minusClick}>-</button>
        <br/>
        <br/>
        <br/>
        <input 
          type="text"
          value={this.state.name}
          onChange={e => this.setState({ name: e.target.value })}/>
        &nbsp;&nbsp;
        <button onClick={this.sure}>确定</button>
      </div>
    )
  }
}
